<!DOCTYPE html>
<html lang="en">
    <head>

        <!--	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
                <script src="../../jquery-1.7.2.js"></script>
                <script src="../../ui/jquery.ui.core.js"></script>
                <script src="../../ui/jquery.ui.widget.js"></script>
                <script src="../../ui/jquery.ui.position.js"></script>
                <script src="../../ui/jquery.ui.autocomplete.js"></script>
                <link rel="stylesheet" href="../demos.css">-->
                
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
        
        <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
        <link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
        
        <style>
         .search-item {
            padding: 5px 10px;
            white-space: normal;
            color: #555;
            text-decoration: none;
            display: block;
            overflow: hidden;
        }    
        .search-item h3 {
            display: block;
            font: inherit;
            font-weight: bold;
            color: #222;
        }

        .search-item h3 span {
            float: right;
            font-weight: normal;
            margin:0 0 5px 5px;
            width: 100px;
            clear: none;
        }
        </style>
        <script>
        Ext.onReady(function() {    
                
              /*  var internas = Ext.create('Ext.data.Store', {
                                 fields: ['codigo', 'nombre'],
                                  data : [
                                         {'codigo':"81-1", 'nombre':"Rodolfo POU DGN ADMINISTRACION INFORMATICA"},
                                         {'codigo':"81-2", 'nombre':"Patricio GOMEZ  DGN ADMINISTRACION ARQUITECTURA"},
                                         {'codigo':"81-3", 'nombre':"MURAS DGN  CONTABILIDAD"},
                                         {'codigo':"81-1", 'nombre':"JULIO K DGN ADMINISTRACION INFORMATICA"},
                                         {'codigo':"81-1", 'nombre':"Roxana MATURO  DGN ADMINISTRACION Contabilidad"},
                                         {'codigo':"81-1", 'nombre':"Oscar MALONE DGN ADMINISTRACION INFORMATICA"},
                                         {'codigo':"81-1", 'nombre':"Pablo RODRIGUEZ  DGN ADMINISTRACION INFORMATICA"},
                                         {'codigo':"81-1", 'nombre':"Ricardo LEVANO DGN ADMINISTRACION INFORMATICA"},
                                         {'codigo':"81-1", 'nombre':"Raquel FERNANDEZ  DGN ADMINISTRACION INFORMATICA"},
                                         {'codigo':"81-1", 'nombre':"Jorgelina HERNMITA DGN ADMINISTRACION INFORMATICA"},
                                         {'codigo':"81-2", 'nombre':"Jorge Vaneza  DGN ADMINISTRACION ARQUITECTURA"},
                                         {'codigo':"81-2", 'nombre':"Paola BENITEz DGN ADMINISTRACION ARQUITECTURA"},
                                         {'codigo':"81-2", 'nombre':"Patricio JUAREZ DGN ADMINISTRACION ARQUITECTURA"},
                                   ],
                                    pageSize: 10
                          });
             */
            Ext.define("Post", {
                  extend: 'Ext.data.Model',
             proxy: {
              type: 'json',
                 url : 'http://localhost/MESA/secciones/searchSectores.php',
              reader: {
                type: 'jsonp',
              //  root: 'topics',
                totalProperty: 'totalCount'
            }
         },

          fields: [
            {name: 'codigo', mapping: 'post_codigo'},
            {name: 'nombre', mapping: 'sector_nombre'}
          ]
        });

        ds = Ext.create('Ext.data.Store', {
                  pageSize: 10,
                  model: 'Post'
        });

        var panel_remitente = Ext.create('Ext.panel.Panel', {
                          renderTo: Ext.getBody(),
                          title: 'Remitente',
                          width: 600,
                          bodyPadding: 10,
                          layout: 'anchor',
                          items: [{
                             xtype: 'combo',
                             store: ds ,
                             displayField: 'nombre',
                             typeAhead: false,
                             hideLabel: true,
                             hideTrigger:true,
                             anchor: '100%',
                             listConfig: {
                                    loadingText: 'Buscando...',
                                    emptyText: 'No se encontraron coincidencias.',

                                    // Custom rendering template for each item
                                    getInnerTpl: function() {
                                            return '<a class="search-item">{nombre} </a>';
                                    }
                             },
                             pageSize: 10
                       }, {
                          xtype: 'component',
                          style: 'margin-top:10px',
                          html: 'Live search requires a minimum of 4 characters.'
                       }]
                     });
                        
        })
        </script>
    </head>
    <body>
        <div id="remitente"> </div>

    </body>
</html>
